<template>
  <div class="orderTest-container">
    <div class="bigTitle" style="text-align:left;">
      MY WORKS
    </div>
    <div class="filter" ref="filter">
      <div class="filter-item active" @click="handleFilter(0)">全部</div>
      <div class="filter-item" @click="handleFilter(1)">移动端</div>
      <div class="filter-item" @click="handleFilter(2)">电脑端</div>
    </div>
    <div class="worksList" ref="wrap">
      <div
        class="work-item"
        ref="imgWrap"
        v-for="work in works"
        :key="work.name"
      >
        <img :src="work.img" class="image" />

        <div class="item">
          <div class="zhezhao" @click="handleClickImg(work.url, work.type)">
            <div class="imgInfo">
              {{ work.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-dialog ref="dialog" :src="url"></my-dialog>
  </div>
</template>
<script>
  export default {
    name: "WorkList",
    components: {},
    data() {
      return {
        // 没个图片宽度
        imgWidth: 400,
        marginRight: 20,
        show: false,
        url: "",
        works: [
          {
            type: 1,
            name: "康宝自由行(手机端)",
            img: require("@/assets/kb.png"),
            url: "http://redian720.com:8888/kangbao/index.jsp",
          },
          {
            type: 2,
            name: "基于高德地图的招商服务(电脑端)",
            img: require("@/assets/kfq.png"),
            url: "http://redian720.com:8888/kaifaqu/zhaoshangfuwu.html",
          },
          {
            type: 2,
            name: "后台商单网销系统",
            img: require("@/assets/sd.png"),
            url: "http://admin.shangdan.cn/",
          },
          {
            type: 2,
            name: "旧版博客",
            img: require("@/assets/oldblog.png"),
            url: "http://lihann.gitee.io/home/",
          },
          {
            type: 1,
            name: "答题小游戏(手机端)",
            img: require("@/assets/answer.png"),
            url: "https://lihann.gitee.io/answer/",
          },

          {
            type: 2,
            name: "公司官网",
            img: require("@/assets/guanwang.png"),
            url: "http://redian720.com/",
          },
        ],
        bgworks: [
          {
            type: 1,
            name: "康宝自由行(手机端)",
            img: require("@/assets/kb.png"),
            url: "http://redian720.com:8888/kangbao/index.jsp",
          },
          {
            type: 2,
            name: "基于高德地图的招商服务(电脑端)",
            img: require("@/assets/kfq.png"),
            url: "http://redian720.com:8888/kaifaqu/zhaoshangfuwu.html",
          },
          {
            type: 2,
            name: "后台商单网销系统",
            img: require("@/assets/sd.png"),
            url: "http://admin.shangdan.cn/",
          },
          {
            type: 2,
            name: "旧版博客",
            img: require("@/assets/oldblog.png"),
            url: "http://lihann.gitee.io/home/",
          },
          {
            type: 1,
            name: "答题小游戏(手机端)",
            img: require("@/assets/answer.png"),
            url: "https://lihann.gitee.io/answer/",
          },

          {
            type: 2,
            name: "公司官网",
            img: require("@/assets/guanwang.png"),
            url: "http://redian720.com/",
          },
        ],
      };
    },
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
      handleFilter(index) {
        let all = this.$refs.filter.children;
        all.forEach((item, i) => {
          item.classList.remove("active");
          if (index == i) {
            item.classList.add("active");
            if (index == 0) {
              this.works = JSON.parse(JSON.stringify(this.bgworks));
            } else this.works = this.bgworks.filter((w) => w.type == index);
          }
        });
      },
      handleClickImg(url, type) {
        // this.$router.push(url);
        window.open(url);
        // this.url = url;
        // this.$refs.type = type;
        // this.$refs.dialog.handleShow();
        // console.log("img url", url);
      },
      // waterFall() {
      //   let imgs = this.$refs.imgWrap;
      //   let boxWidth = this.$refs.wrap.clientWidth;
      //   if (boxWidth > 1440) {
      //     this.imgWidth = 500;
      //   } else if (boxWidth < 1024) {
      //     this.imgWidth = 390;
      //   }
      //   // 计算当前可容下图片数量
      //   let maxColNum = parseInt(boxWidth / (this.imgWidth + this.marginRight));
      //   if (maxColNum == 0) {
      //     maxColNum = 1;
      //   }
      //   let contentWidth = (this.imgWidth + this.marginRight) * maxColNum;
      //   console.log(
      //     "可视宽度：" +
      //       boxWidth +
      //       ",列数：" +
      //       maxColNum +
      //       ",所有图片宽度" +
      //       contentWidth
      //   );
      //   console.log(boxWidth - contentWidth);
      //   // console.log(imgs[0]);
      //   // imgs[1].style.top = 0;
      //   // imgs[1].style.left = this.imgWidth + this.marginRight + "px";
      //   // imgs[2].style.left = 2 * (this.imgWidth + this.marginRight) + "px";
      //   // imgs[3].style.top = 2*(this.) + "px";
      //   imgs.forEach((img, i) => {
      //     // 该在第几行
      //     let col = parseInt(i / maxColNum) + 1;
      //     // if (col <= 1) {
      //     console.log("col", col);
      //     img.style.top = col - 1;
      //     if (col == 0)
      //       img.style.left = i * (this.imgWidth + this.marginRight) + "px";
      //     // else
      //     //   img.style.left =
      //     //     (i / col || 1) * (this.imgWidth + this.marginRight) + "px";
      //     // }
      //   });
      // },
    },
  };
</script>
<style lang="scss" scoped>
  $imgPadding: 20px;
  * {
    transition: 0.3s;
  }
  .bigTitle::before {
    left: 0;
    width: 200px;
  }
  .worksList {
    @include flex;
    flex-wrap: wrap;
  }
  .active {
    color: $hoverColor;
    transition: 0.3s;
  }
  .filter {
    @include flex;
    transition: 0.3s;
    padding-left: 20px;
  }
  .filter-item {
    margin-right: 20px;
    cursor: pointer;
    background-color: #242b58;
    // padding: 10px 20px;
  }
  .item {
    overflow: hidden;
  }
  .work-item {
    width: 33%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: 0.3s;
    padding: $imgPadding;
    overflow: hidden;
    &:hover {
      img {
        transform: scale(1.1);
      }
      .zhezhao {
        left: 0;
        right: 0;
        bottom: 0;
        color: $hoverColor;
      }
    }
    .zhezhao {
      cursor: pointer;
      position: absolute;
      top: $imgPadding;
      left: $imgPadding;
      right: $imgPadding;
      bottom: $imgPadding;
      // background-color: rgba($color: #000000, $alpha: 0.5);
      transition: 0.3s;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .imgInfo {
    position: absolute;
    padding: $imgPadding;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: rgba($color: #000000, $alpha: 0.5);
    // left: 20px;
    // right: 20px;
  }
  @media screen and (max-width: 1020px) {
    .work-item {
      width: 50%;
    }
    .imgInfo {
      font-size: 14px;
    }
  }
  @media screen and (max-width: 480px) {
    .filter-item {
      padding: 7px;
      font-size: 14px;
    }
    .work-item {
      width: 100%;
    }
    .imgInfo {
      font-size: 12px;
    }
  }
</style>
